<!-- 维护记录 -->
<template>
    <div class="page assetsDetail-page" data-page="maintainRecord" style="z-index: 2;">
        <div class="link-page-nav">
            <a href="#" class="link" @click="$root.backToTab()">
                <i class="iconfont icon-zuo"></i>
            </a>
        </div>
        <div class="link-page-top" style="padding-bottom: 17px;" >
                <div class="link-page-title">维保记录</div>
        </div>
        <div class="page-content" style="padding-bottom: 80px;">
           <ul id="maintain-info_{{getNewId}}">
              
           </ul>
        </div>
  </div>
</template>
<script>
    return {
        mounted() {
            var self = this;
            var app = self.$app;
            //页面传参
            self.assetsId = this.$route.params.assetsId;
            self.assetsType = this.$route.params.assetsType;
        },
        data: function () {
            return {
              getNewId: (new Date()).getTime(),
              assetsId: 0
            }
        },
        methods: {
            backToTab: function() {
                app.methods.backToTab();
            },
            getAMInfoDetails:function(){
                var self = this;
                common.loading(1);
                Dao.getMaintainRecordsByAssetsId({
                    userName:userInfor.accountName,
                    deviceId:appKeyObj.deviceId,
                    assetsId:self.assetsId,
                    pageIndex:0,
                    pageSize:25,
                },function(data){
                  common.loading(0);
                    if(data.length==0){
                        $("#maintain-info_"+self.getNewId).append(`<div class="no-data-img"><img src="`+listNoDataPic()+`"/></div>`);
                    }else{
                        for(var i=0;i<data.length;i++){
                          var itemId=data[i].id;
                          var maintainTypeHtml="";
                          if(data[i].maintainType==1){//维保类型 1 维保巡查任务 2保养任务 3测试任务 4联动测试任务
                            maintainTypeHtml=`
                              <div class="info-view">
                              <div class="item-media-icon greenC">
                                      <i class="iconfont icon-APPgongzuotaileixingtubiao_weibaoxuncha"></i>
                                  </div>
                                  <div class="info-time-name">
                                    <p class="info-time">`+data[i].updateTime+`</p>
                                    <p class="info-name">由【`+data[i].maintainName+`】巡查</p>
                                  </div>
                                </div>`;
                            if(self.assetsType==2){//区域类型的资产
                                maintainTypeHtml+=`<div class="item-task-view" >
                                      <i class="iconfont icon-fujian"></i>
                                      <p>关联任务：`+data[i].taskName+`"<a href='/allBuild/maintainInspect/`+data[i].taskId+`/`+data[i].orgName+`/`+data[i].taskName+`/3/`+data[i].orgId+`/'>进入任务</a></p>
                                    </div>`;
                              }
                          }else if(data[i].maintainType==2){//维保类型 1 维保巡查任务 2保养任务 3测试任务 4联动测试任务
                            maintainTypeHtml=`
                              <div class="info-view">
                              <div class="item-media-icon greenC">
                                      <i class="iconfont icon-APPgongzuotaileixingtubiao_dandianceshi"></i>
                                  </div>
                                  <div class="info-time-name">
                                    <p class="info-time">`+data[i].updateTime+`</p>
                                    <p class="info-name">由【`+data[i].maintainName+`】维保</p>
                                  </div>
                                </div>`;
                            if(self.assetsType==2){//区域类型的资产
                                maintainTypeHtml+=`<div class="item-task-view" >
                                      <i class="iconfont icon-fujian"></i>
                                      <p>关联任务：`+data[i].taskName+`"<a href='/allBuild/maintain/`+data[i].taskId+`/`+data[i].orgName+`/`+data[i].taskName+`/3/`+data[i].orgId+`/'>进入任务</a></p>
                                    </div>`;
                              }
                          }else if(data[i].maintainType==3){//维保类型 1 维保巡查任务 2保养任务 3测试任务 4联动测试任务
                            maintainTypeHtml=`
                              <div class="info-view">
                              <div class="item-media-icon greenC">
                                      <i class="iconfont icon-APPgongzuotaileixingtubiao_liandong"></i>
                                  </div>
                                  <div class="info-time-name">
                                    <p class="info-time">`+data[i].updateTime+`</p>
                                    <p class="info-name">由【`+data[i].maintainName+`】发起</p>
                                  </div>
                                </div>`;
                            if(self.assetsType==2){//区域类型的资产
                                maintainTypeHtml+=`<div class="item-task-view" >
                                      <i class="iconfont icon-fujian"></i>
                                      <p>关联任务：`+data[i].taskName+`"<a href='/allBuild/singleTest/`+data[i].taskId+`/`+data[i].orgName+`/`+data[i].taskName+`/3/`+data[i].orgId+`/'>进入任务</a></p>
                                    </div>`;
                              }
                          }else{
                            maintainTypeHtml=`
                              <div class="info-view">
                              <div class="item-media-icon greenC">
                                      <i class="iconfont icon-APPgongzuotaileixingtubiao_jiechujing"></i>
                                  </div>
                                  <div class="info-time-name">
                                    <p class="info-time">`+data[i].updateTime+`</p>
                                    <p class="info-name">由【`+data[i].maintainName+`】发起</p>
                                  </div>
                                </div>`;
                          }
                          
                          var beforPicHtml="";
                          var afterPicHtml="";
                          let beforePicList = data[i].picBeforeUrls;
                          let afterPicList = data[i].picAfterUrls;
                        
                          let beforPicAarr = beforePicList.split(',');
                          for (let m = 0; m < beforPicAarr.length; m++) {
                          beforPicHtml+=`<img src="` + picNo(beforPicAarr[m]) + `" data-index="`+ m +`">`;
                          }
                          
                          let afterPicAarr = afterPicList.split(',');
                          for (let n = 0; n < afterPicAarr.length; n++) {
                            afterPicHtml+=`<img src="` + picNo(afterPicAarr[i]) + `"  data-index="` + n +`">`;
                          }
                          var workContentHtml="";
                          if(data[i].description!="" && data[i].maintainStandardContent){
                              self.workContentList=data[i].maintainStandardContent;
                              var descriptionStr=JSON.parse(data[i].description);
                              for (var j=0;j<self.workContentList.length;j++) {
                                  var bean=self.workContentList[j];
                                  var inputHtml="";
                                  var checkHtml="";
                                  var tabid = descriptionStr[bean.id].tab;
                                  if(tabid==0){
                                    checkHtml=`
                                    <p class="buttons-row" style="margin-top: 16px">
                                      <div class="checkItem">
                                        <input type="radio" id="normal_`+self.getNewId+`_`+j+`" name="checkRadio_`+j+`" value="0" disabled="disabled" checked="checked">
                                        <label name="normal`+j+`" for="normal" class="checked">正常</label>
                                      </div>
                                      <div class="checkItem" style="margin: 0 3%;">
                                        <input type="radio" id="abnormal_`+self.getNewId+`_`+j+`" name="checkRadio_`+j+`" value="1" disabled="disabled">
                                        <label name="abnormal`+j+`" for="abnormal">异常</label>
                                      </div>
                                      <div class="checkItem">
                                        <input type="radio" id="notInvoled_`+self.getNewId+`_`+j+`" name="checkRadio_`+j+`" value="2" disabled="disabled">
                                        <label name="notInvoled`+j+`" for="notInvoled">未涉及</label>
                                      </div>
                                    </p>`;
                                  }else if(tabid==1){
                                    checkHtml=`
                                      <p class="buttons-row" style="margin-top: 16px">
                                        <div class="checkItem">
                                          <input type="radio" id="normal_`+self.getNewId+`_`+j+`" name="checkRadio_`+j+`" value="0" disabled="disabled">
                                          <label name="normal`+j+`" for="normal">正常</label>
                                        </div>
                                        <div class="checkItem" style="margin: 0 3%;">
                                          <input type="radio" id="abnormal_`+self.getNewId+`_`+j+`" name="checkRadio_`+j+`" value="1" disabled="disabled" checked="checked">
                                          <label name="abnormal`+j+`" for="abnormal" class="checked">异常</label>
                                        </div>
                                        <div class="checkItem">
                                          <input type="radio" id="notInvoled_`+self.getNewId+`_`+j+`" name="checkRadio_`+j+`" value="2" disabled="disabled">
                                          <label name="notInvoled`+j+`" for="notInvoled">未涉及</label>
                                        </div>
                                      </p>`;
                                  }else{
                                    checkHtml=`
                                      <p class="buttons-row" style="margin-top: 16px">
                                        <div class="checkItem">
                                          <input type="radio" id="normal_`+self.getNewId+`_`+j+`" name="checkRadio_`+j+`" value="0" disabled="disabled">
                                          <label name="normal`+j+`" for="normal">正常</label>
                                        </div>
                                        <div class="checkItem" style="margin: 0 3%;">
                                          <input type="radio" id="abnormal_`+self.getNewId+`_`+j+`" name="checkRadio_`+j+`" value="1" disabled="disabled">
                                          <label name="abnormal`+j+`" for="abnormal">异常</label>
                                        </div>
                                        <div class="checkItem">
                                          <input type="radio" id="notInvoled_`+self.getNewId+`_`+j+`" name="checkRadio_`+j+`" value="2" disabled="disabled" checked="checked">
                                          <label name="notInvoled`+j+`" for="notInvoled" class="checked">未涉及</label>
                                        </div>
                                      </p>`;
                                  }
                                  var decHtml=`
                                    <p style="margin-top: 16px">
                                      <input type="text" class="inDes" id="inDes_`+self.getNewId+`_`+j+`" value="`+descriptionStr[bean.id].des+`" disabled="disabled"/>
                                    </p>`;
                                  var numHtml=`
                                    <p style="margin-top: 16px">
                                    <input type="number" class="inNum" id="inNum_`+self.getNewId+`_`+j+`" value="`+descriptionStr[bean.id].num+`" disabled="disabled"/>
                                  </p>`
                                  switch(bean.type){//1：单选，2：文本，3：数值，4：单选+文本，5：单选+数值，6：数值+文本
                                    case 1:inputHtml=checkHtml;
                                      break;
                                    case 2:inputHtml=decHtml;
                                      break;
                                    case 3:inputHtml=numHtml;
                                      break;
                                    case 4:inputHtml=checkHtml+decHtml;
                                      break;
                                    case 5:inputHtml=checkHtml+numHtml;
                                      break;
                                    case 6:inputHtml=numHtml+decHtml;
                                      break; 
                                  } 
                                  workContentHtml+=`
                                    <div>
                                      <p class="workContent">`+bean.workContent+`</p>
                                      `+inputHtml+`
                                    </div>`;
                                }
                            }
                            $("#maintain-info_"+self.getNewId).append(`
                                <li>
                                  <div class="item-top-view" id="topView_`+self.getNewId+`_`+data[i].id+`">
                                    `+maintainTypeHtml+`
                                  </div>
                                
                                  <div class="item-content-view" id="contentView_`+self.getNewId+`_`+data[i].id+`" style="display:none">
                                    <div class="content-hr"></div>
                                    <span class="tt">作业前照片</span>
                                    <ul class="pic-panels" id="beforePic_`+self.getNewId+`_`+i+`">
                                      `+beforPicHtml+`
                                    </ul>
                                    <span class="tt">作业后照片</span>
                                    <ul class="pic-panels" id="afterPic_`+self.getNewId+`_`+i+`">
                                      `+afterPicHtml+`
                                    </ul>
                                    <span class="tt">作业填报</span>
                                    <div id="workContentListView_"`+self.getNewId+`>`+workContentHtml+`
                                  </div>
                                    <div class="item-bottom-view">
                                      <span id="sl-option-`+self.getNewId+`_`+data[i].id+`" class="option-`+data[i].id+`">收起<i class="iconfont icon-shouqi-copy"></i></span>
                                    </div>
                                  </div>
                                </li>
                            `);
                            jQuery("#beforePic_"+self.getNewId + "_" + i +" img").off('click').click(function(e){
                              openAndShowBigImage(beforPicAarr, parseInt(e.currentTarget.getAttribute('data-index') || 0));
                            });
                            jQuery("#afterPic_" + self.getNewId + "_" + i +" img").off('click').click(function (e) {
                              openAndShowBigImage(afterPicAarr, parseInt(e.currentTarget.getAttribute('data-index') || 0));
                          });
                            jQuery("#sl-option-"+self.getNewId+"_"+data[i].id).off('click').on('click',{'data':itemId},function(e) {
                              self.hideDetail(e.data.data);
                              return false;//阻止事件冒泡
                          });
                            jQuery("#topView_"+self.getNewId+"_"+data[i].id).off('click').on('click',{'data':itemId},function(e) {
                              self.showDetail(e.data.data);
                              return false;//阻止事件冒泡
                          });
                        }          
                    }
                    
                });
            },
            hideDetail:function(id){
              var self = this;
              jQuery("#contentView_"+self.getNewId+"_"+id).slideUp(500);
            },
            showDetail:function(id){
              var self = this;
                jQuery("#contentView_"+self.getNewId+"_"+id).slideDown(500);
            },
        },
       
        on: {
            pageInit: function (e, page) {
                this.getAMInfoDetails();
            },
        }
    }
</script>